<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cartzilla | Project structure</title>
    <!-- SEO Meta Tags-->
    <meta name="description" content="Cartzilla - Bootstrap E-commerce Template">
    <meta name="keywords" content="bootstrap, shop, e-commerce, market, modern, responsive,  business, mobile, bootstrap, html5, css3, js, gallery, slider, touch, creative, clean">
    <meta name="author" content="Createx Studio">
    <!-- Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon and Touch Icons-->
    <link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
    <link rel="manifest" href="../site.webmanifest">
    <link rel="mask-icon" color="#fe6a6a" href="../safari-pinned-tab.svg">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">
    <!-- Vendor Styles including: Font Icons, Plugins, etc.-->
    <link rel="stylesheet" media="screen" href="../vendor/simplebar/dist/simplebar.min.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/tiny-slider/dist/tiny-slider.css"/>
    <!-- Main Theme Styles + Bootstrap-->
    <link rel="stylesheet" media="screen" href="../css/theme.min.css">
    <!-- Google Tag Manager-->
    <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-WKV3GT5');
    </script>
  </head>
  <!-- Body-->
  <body>
    <!-- Google Tag Manager (noscript)-->
    <noscript>
      <iframe src="//www.googletagmanager.com/ns.html?id=GTM-WKV3GT5" height="0" width="0" style="display: none; visibility: hidden;"></iframe>
    </noscript>
    <main class="container-fluid">
      <!-- Main content-->
      <section class="offcanvas-enabled row pb-3 pb-md-4">
        <div class="col-xxl-9">
          <!-- Navbar-->
          <header class="navbar navbar-expand navbar-light fixed-top bg-light shadow-sm px-3 px-lg-4" data-scroll-header data-fixed-element><a class="navbar-brand d-lg-none" href="dev-setup.html"><img src="../img/logo-dark.png" width="142" alt="Cartzilla"></a>
            <ul class="navbar-nav ms-auto d-none d-lg-flex">
              <li class="nav-item"><a class="nav-link" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live preview</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
              <li class="nav-item"><a class="nav-link" href="../components/typography.html"><i class="ci-server align-middle mt-n1 me-2"></i>Components</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
            </ul>
            <button class="navbar-toggler d-block d-lg-none ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#docs-nav"><span class="navbar-toggler-icon"></span></button><a class="btn btn-primary btn-shadow ms-2 ms-lg-4" href="https://themes.getbootstrap.com/product/cartzilla-bootstrap-e-commerce-template-ui-kit/" target="_blank" rel="noopener"><i class="ci-cart me-2 d-none d-sm-inline-block"></i>Buy now</a>
          </header>
          <!-- Side navigation-->
          <aside class="offcanvas offcanvas-expand bg-dark" id="docs-nav">
            <div class="offcanvas-cap bg-darker d-none d-lg-block"><a class="navbar-brand py-1" href="dev-setup.html"><img src="../img/logo-light.png" width="142" alt="Cartzilla"></a><span class="badge bg-success">Docs</span></div>
            <div class="offcanvas-cap bg-darker align-items-center d-flex d-lg-none">
              <div class="d-flex align-items-center">
                <h5 class="text-light mb-0 me-2">Menu</h5><span class="badge bg-success">Docs</span>
              </div>
              <button class="btn-close btn-close-white" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body" data-simplebar data-simplebar-auto-hide="true">
              <div class="pt-4 pb-3 mt-lg-3">
                <div class="d-flex d-lg-none pb-4 mb-4 border-bottom border-light"><a class="btn btn-outline-light btn-sm me-3" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live demo</a><a class="btn btn-light btn-sm" href="../components/typography.html"><i class="ci-server align-middle mt-n1 me-2"></i>Components</a></div>
                <div class="widget widget-links widget-light mb-4 pb-2">
                  <h3 class="widget-title text-white">Contents</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="dev-setup.html">Dev environment setup</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="working-with-gulp.html">Working with Gulp</a></li>
                    <li class="widget-list-item active"><a class="widget-list-link" href="project-structure.html">Project structure</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="install-vendor-plugin.html">Installing Vendor plugins with npm and Gulp</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="using-preprocessors.html">Using Pug &amp; Sass</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="autoprefixer.html">Browser support</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="global-colors.html">Global colors</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="components.html">Components</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="navbar-footer.html">Navbar / Page title / Footer variants (Pug)</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="utilities.html">Utility classes</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="ui-icons.html">UI icons (Icon font)</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="mailchimp.html">Mailchimp subscription form</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="credits.html">Sources and credits</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="changelog.html">Changelog</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </aside>
          <!-- Page title-->
          <div class="border-bottom mt-lg-2 pt-5 pb-2 mb-5">
            <h1 class="mt-3 mt-lg-4 pt-5">Project structure</h1>
          </div>
          <div class="pb-5">
            <div class="table-responsive">
              <table class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th class="w-25">Folder / File name</th>
                    <th class="w-75">Description</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="w-25"><span class="fw-medium">Cartzilla</span></td>
                    <td class="w-75">Folder contains all template source and production files.</td>
                  </tr>
                  <tr>
                    <td class="w-25"><span class="fw-medium">Cartzilla / src</span></td>
                    <td class="w-75">This folder holds all template source files like .pug, .scss, .js that are then processed (compiled / minified) to <code>dist</code> folder.</td>
                  </tr>
                  <tr>
                    <td class="w-25"><span class="fw-medium">Cartzilla / dist</span></td>
                    <td class="w-75">Folder contains all template distribution files like .html, .css, .js that have been processed (compiled / minified) from <code>src</code> folder using Node.js and Gulp.</td>
                  </tr>
                  <tr>
                    <td class="w-25"><span class="fw-medium">Cartzilla / dist / vendor</span></td>
                    <td class="w-75">This folder contains all vendor plugins' <code>.js / .css</code> files.</td>
                  </tr>
                  <tr>
                    <td class="w-25"><span class="fw-medium">Cartzilla / package.json</span></td>
                    <td class="w-75">File contains meta data about your app or module. Most importantly, it includes the list of dependencies to install from npm when running <kbd>npm install</kbd>.</td>
                  </tr>
                  <tr>
                    <td class="w-25"><span class="fw-medium">Cartzilla / gulpfile.js</span></td>
                    <td class="w-75">Configuration file for Gulp library. It contains all tasks you want to perform with Gulp. Learn more about it from <a href='working-with-gulp.html'>Working with Gulp</a> section or <a href='https://github.com/gulpjs/gulp/blob/v4.0.0/docs/API.md' target='_blank'>official Gulp documentation</a>.</td>
                  </tr>
                  <tr>
                    <td class="w-25"><span class="fw-medium">Cartzilla / src / js</span></td>
                    <td class="w-75">This folder contains main <code>theme.js</code> and <code>components</code> subfolder with all modules. <code>theme.js</code> is processed (compiled / minified) into 2 files:  <code>dist/js/theme.js</code> and <code>dist/js/theme.min.js</code>. The latter is linked to all <code>.html</code> documents</td>
                  </tr>
                  <tr>
                    <td class="w-25"><span class="fw-medium">Cartzilla / src / scss</span></td>
                    <td class="w-75">This folder contains all project <code>sass</code> files that are compiled and minified to styles in <code>dist/css/</code> folder.</td>
                  </tr>
                  <tr>
                    <td class="w-25"><span class="fw-medium">Cartzilla / src / templates</span></td>
                    <td class="w-75">This folder contains all <code>pug</code> files that are compiled into HTML in <code>dist</code>, <code>dist/components</code> and <code>dist/docs</code> folders.</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="alert alert-info d-flex fs-md mt-3 mb-4">
              <div class="alert-icon fs-lg"><i class="ci-announcement"></i></div>
              <div><span class='fw-medium'>Note:</span> if you do not use Pro Front-End setup with Node.js and Gulp and want directly edit html / css / js files you should be looking into <span class='fw-medium'>dist</span> folder.</div>
            </div>
            <p>Whether you work with Node.js and Gulp or not you can still take advantage of preprocessors for HTML and CSS.<br>In this case you might want to learn <a href='using-preprocessors.html' class='fw-medium'>how to use Pug and Sass</a>.</p>
          </div>
        </div>
      </section>
    </main>
    <!-- Back To Top Button--><a class="btn-scroll-top" href="#top" data-scroll data-fixed-element><span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span><i class="btn-scroll-top-icon ci-arrow-up">   </i></a>
    <!-- Vendor scrits: js libraries and plugins-->
    <script src="../vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../vendor/simplebar/dist/simplebar.min.js"></script>
    <script src="../vendor/tiny-slider/dist/min/tiny-slider.js"></script>
    <script src="../vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
    <!-- Main theme script-->
    <script src="../js/theme.min.js"></script>
  </body>
</html>